<template>

  <!--原来设计的快捷方式-->
  <el-card >
    <el-row :gutter="10"  >
        <el-col :span="4">
          <el-card class="shortcut-card" style="background-color: #BBF1F2; border-color: #BBF1F2;" @click.native="openPath('/toSocialConnectionList')">
            <i class="el-icon-user shortcut-h3"></i>
            <span class="shortcut-h3">社交关系</span>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="shortcut-card" style="background-color: #D9FCDA; border-color: #D9FCDA;" @click.native="openPath('/toBillList')">
            <i class="el-icon-tickets"></i>
            <span class="shortcut-h3">记账</span>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="shortcut-card" style="background-color: #FFF3D0; border-color: #FFF3D0;" @click.native="openPath('/toPlanTodayList')">
            <i class="el-icon-time"></i>
            <span class="shortcut-h3">任务中心</span>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="shortcut-card" style="background-color: #FFDEDE; border-color: #FFDEDE;" @click.native="openPath('/toMonthlyBill')">
            <i class="el-icon-s-data"></i>
            <span class="shortcut-h3">本月统计</span>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="shortcut-card" style="background-color: #F8CBFF; border-color: #F8CBFF;" @click.native="openPath('/toEventList')">
            <i class="el-icon-wallet"></i>
            <span class="shortcut-h3">事件</span>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="shortcut-card" style="background-color: #BBF1F2; border-color: #BBF1F2;" @click.native="openPath('/toPasswordManagement')">
            <i class="el-icon-data-board"></i>
            <span class="shortcut-h3">密码管理</span>
          </el-card>
        </el-col>

    </el-row>
  </el-card>

  <!--<el-card>-->
  <!--  <el-row :gutter="10">-->
  <!--    <el-col :span="6">-->
  <!--      <div style="height: 60px; width: 222px; background-color: red; cursor:pointer; ">-->
  <!--        <el-row>-->
  <!--          <el-col :span="6">-->
  <!--            &lt;!&ndash;<div style="height: 42px; width: 42px; background-color: darkorange; text-align: center; margin: auto;">&ndash;&gt;-->
  <!--            <div style="height: 42px; width: 42px; background-color: darkorange; text-align: center; ">-->
  <!--              <i class="el-icon-edit" style="font-size: 24px; line-height: 40px;"></i>-->
  <!--              &lt;!&ndash;<i class="el-icon-edit" style="font-size: 24px; "></i>&ndash;&gt;-->
  <!--            </div>-->
  <!--          </el-col>-->
  <!--          <el-col :span="18">-->
  <!--            <p>社交管理</p>-->
  <!--          </el-col>-->
  <!--        </el-row>-->
  <!--      </div>-->
  <!--    </el-col>-->
  <!--    <el-col :span="6"></el-col>-->
  <!--    <el-col :span="6"></el-col>-->
  <!--    <el-col :span="6"></el-col>-->
  <!--  </el-row>-->
  <!--</el-card>-->

</template>

<script>
  export default {
    // 快捷方式
    name: "Shortcut",
    methods: {
      /**
       * 跳转到指定的路由
       * @param url 跳转的地址
       */
      openPath(url){
        this.$router.push({path: url})
      }
    }
  }
</script>

<style scoped>

  .shortcut-card {
    cursor:pointer;
    /*height: 60px;*/
    /*border-radius: 8px;*/
    /*text-align: center;*/
  }

  .shortcut-h3 {
    margin-top: 1px;
    /*font-size: 12px;*/
    /*font-weight: 600;*/
  }

</style>
